html{
  scroll-behavior: smooth;//让链接变换平缓
}
.navbar{
  border-radius: 0%;
  border:0px;
  background:black;
  overflow: hidden;
  padding: .8em 0em;
  margin:0px;
  width:100%;
  position:sticky;//让导航栏紧紧贴着窗口
  left:0;
  top:0;
  z-index: 10;//层级深度
  // 修改logo
  .navbar-brand{
    text-transform: uppercase;
    font-family: OSBold;
    color: #fff;
  }
  // 导航元素修改
  .nav{
    margin: 0px;
    overflow: hidden;
  }
  .navbar-nav>li>a{
    color:#fff;
  }
  .nav a{
    text-transform: uppercase;
    font-family: OSBold;
    border-bottom:5px solid transparent;

    // 过渡效果
    transition: all .3s linear;

    // & == a 元素自己本身  hover 悬停的意思
    &:hover{
        border-bottom:5px solid #fcac45;
        transform:scale(1.1);
    }
  }
}
.banner{
  background: url('../images/bg1.png')no-repeat center bottom;
  color: #fff;
  text-align: center;
  padding:16em 0em 6em;
  overflow: hidden;

  .title{
    font-family: OSBold;
    text-transform: uppercase;
    font-size:3em;

    span{
      color:#fcac45;
    }
  }

  .subtitle{
    font-family: OSLight;
    font-size:1.5em;
    letter-spacing: 1px;
    margin-bottom:10em;

    span{
      font-family: OSBold;
    }
  }
  .other{
    width: 4em;
    height: 4em;
    line-height: 3em;
    border:3px solid #d5d5d5;
    border-radius: 100%;
    margin:0 auto;

    transition: all linear .3s;

    a{
        width:100%;
        height:100%;
        color:#fff;


    }
    &:hover{
        box-shadow: 0px 10px 10px 5px #d5d5d5;
    }    
  }
}
.about{
  padding:6em 0em;
  color:#000000;

  .container{
    display:flex;   // 弹性盒子

    .left{
      flex-shrink: 0.5;//缩放比例，0则不缩放
    }

    .right{
      width:55%;

      .subject{
        margin-bottom: 3em;
        .small{
          font-family: OSLight;
          font-size: 1.5em;
          text-transform: uppercase;
        }
        .big{
          width:95%;
          font-size: 2.5em;
          text-transform: uppercase;
          white-space: nowrap;//强制不换行
          overflow: hidden;
          text-overflow: ellipsis;

          span:first-child{
            border-bottom: 3px solid #fcac45;
          }
          span:last-child{
            font-family: OSBold;
          }
        }
      }
      .desc{
        font-size: 1.2em;
        font-family: OSlight;
        margin-bottom: 2em;
        line-height: 1.2;
      }
      .list{
        margin-bottom: 2em;

        li{
          font-size: 1.1em;
          font-family: OSLtalic;
          span:first-child{
            top:2px;
          }
          span:nth-child(2){
            font-family: OSBold;
          }
        }
      }
      .more{
        display:flex;
        justify-content: center;  //居中
        align-items: center;
        align-content: center;
        padding: 1em 2em;
        width: 15em;
        border:1px solid #413f3f;
        cursor: pointer;
        transition: all linear .3s;
        &:hover{
          transform: translateY(-10px);
          box-shadow: 0px 10px 10px 10px #737373;
        }
        span:first-child{
          right:10px;
        }
        span:last-child{
          white-space: nowrap;
          padding-right: 1em;
          text-transform: uppercase;
          font-size: 1em;
        }
      }
    }
  }
  // 当屏幕缩小到1000px以下
  @media screen and(max-width:1000px) {
    .container{
      display: block;
      .left{
        display:none;
      }
      .right{
        width:100%;
      }
    }
  }
  @media screen and (max-width:500px){
    padding:3em 0em;
    .container{
      .subject{
        .small{
          font-size: 1.2em;
        }
        .big{
          font-size: 2em;
        }
      }
    }
  }
}
.team{
  height:45em;
  background: #413f3f;
  padding: 6em 0em 9em;
  color: #fff;
  .title{
    font-size: 2.5em;
    text-transform: uppercase;
    text-align: center;
    background: url('../images/title-background.png')no-repeat center bottom;
    padding-bottom: 1em;
    span{
      font-family:OSBold;
    }
  }
  .list{
    display: flex;
    .item{
      width:23%;
      margin-right: 2em;
      .cover{
        width:70%;
        overflow: hidden;
        margin: 0 auto;
        border-radius: 100%;
        margin-bottom: 0.5em;

        transition: all linear .3s;
        &:hover{
          transform: translateY(-10px);
          box-shadow: 0px 10px 10px 10px #d5d5d5;
        }

      }
      .box{
        text-align: center;
        
        p:first-child{
          font-size: 1.5em;
          font-family: OSBold;
        }
        p:nth-child(2){
          margin-bottom: 2em;
        }
        p:nth-child(3){
          
        }

      }

    }
  }
  .more{
    margin-top: 3em;
    width: 100%;
    text-align: center;
    font-size: 1em;
    span{
      background-color: #fff;
      display:inline-block;
      width: 1.2em;
      height:1em;
    }
    &:hover{
      cursor: pointer;
    }
  }
  @media screen and (max-width:600px) {
    height:65em;
    .list{
      display: block;
      margin-bottom: 2em;
      .item{
        width: 100%;
        display: flex;
        margin-bottom: 1em;
        .cover{
          width:50%;
          margin:0 auto;
          border-radius: 100%;
          margin-right: 2%;
        }
        .box{
          text-align: left;
        }

      }
    }
  }
}
.services{
  height: 49em;
  background: white;
  padding: 4em 0em 6em;
  color: black;
  .title{
    font-size: 2.5em;
    text-transform: uppercase;
    text-align: center;
    background: url('../images/title-background.png')no-repeat center bottom;
    padding-bottom: 1em;
    span{
      font-family:OSBold;
    }
  }
  .desc{
    padding: 2em 15em;
    text-align: center;
    font-family: OSLight;
    margin-bottom: 5em;
  }
  .list{
    display: flex;
    .item{
      width:23%;
      margin-right: 2em;
      .cover{
        width:70%;
        overflow: hidden;
        margin: 0 auto;
        border-radius: 100%;
        margin-bottom: 0.5em;

        transition: all linear .3s;
        &:hover{
          transform: translateY(-10px);
          box-shadow: 0px 10px 10px 10px #d5d5d5;
        }

      }
      .box{
        text-align: center;
        
        p:first-child{
          font-size: 1.5em;
          font-family: OSBold;
        }
        p:nth-child(2){
          margin-bottom: 2em;
        }
        p:nth-child(3){
          
        }

      }

    }
  }
  @media screen and (max-width:880px) {
    .desc{
      width:90%;
      margin: 0 auto;
      padding: 1em 3em;
      margin-bottom: 1em;
    }
  }
  @media screen and (max-width:600px) {
    height: 65em;
    .desc{
      padding:1em 1em;
      margin-bottom: 1em;
    }
    .list{
      display: block;
      margin-bottom: 2em;
      .item{
        width: 100%;
        display: flex;
        margin-bottom: 1em;
        .cover{
          width:50%;
          margin-right: 2%;
        }
        .box{
          text-align: left;

        }

      }
    }
  }
}
.clients{
  height:35em;
  background: black;
  padding: 6em 0em 9em;
  color: white;
  .title{
    font-size: 2.5em;
    font-family: OSLight;
    text-transform: uppercase;
    text-align: center;
    background: url('../images/title-background.png')no-repeat center bottom;
    padding-bottom: 1em;
    span{
      font-family:OSBold;
    }
  }
  .desc{
    color: #908f8d;
    font-size: 2em;
    padding: 2em 0em;
    width:90%;
    text-align: center;
    margin: 0 auto;
    white-space: nowrap;
    transform: scaleY(0.8);
    span:first-child{
      color:#807e7e;
      font-family: OSLight;
      margin:0em 2em;
      
    }
    span:last-child{
      font-family: OSBold;
    }
  }
  .more{
    margin-top: 0em;
    width: 100%;
    text-align: center;
    font-size: 1em;
    span{
      background-color: #ffffff;
      display:inline-block;
      width: 1.2em;
      height:1em;
    }
    &:hover{
      cursor: pointer;
    }
  }
  @media screen and (max-width:800px) {
    .desc{
      white-space: normal;
    }
  }
}
.work{
  height: 80em;
  background: white;
  padding: 4em 0em 9em;
  color: black;
  .title{
    font-size: 2.5em;
    text-transform: uppercase;
    text-align: center;
    background: url('../images/title-background.png')no-repeat center bottom;
    padding-bottom: 1em;
    span{
      font-family:OSBold;
    }
  }
  .desc{
    padding: 1em 15em;
    text-align: center;
    font-family: OSLight;
  }
  .top{
    display: flex;
    width:70%;
    margin: 0 auto;
    justify-content:space-between;
    margin-bottom: 1em;
    .left {
        color:#000;
    }
    .right{
      display: flex;
      text-align: right;
      font-family: OSLight;
      .one{
        color:#000;
        margin-left: 0.5em;
        margin-right: 0.5em;
      }
      span{
        font-family: normal;
      }
    }
  }
  .list{
    display:flex;
    width:80%;
    margin: 0 auto;
    .cover{
      margin:1em; 
      img{
        max-width:90%;
      }
    }
  }
  @media screen and (max-width:960px){
    height: 60em;
    .desc{
      width:100%;
      padding:1em 3em;
    }
  }

}
.testimonials{
  height:30em;
  background: black;
  padding: 6em 0em 9em;
  color: white;
  .title{
    font-size: 2.5em;
    font-family: OSLight;
    text-transform: uppercase;
    text-align: center;
    background: url('../images/title-background.png')no-repeat center bottom;
    padding-bottom: 1em;
    span{
      font-family:OSBold;
    }
  }
  .desc{
    width:90%;
    margin:0 auto;
    font-size: 1em;
    padding: 2em 15em;
    text-align: center;
    font-family: OSLight;
  }
  .other{
    text-align: center;
    margin-bottom: 2em;
    span{
      font-family: OSLight;
    }
  }
  .more{
    width: 100%;
    text-align: center;
    font-size: 1em;
    span{
      background-color: #ffffff;
      display:inline-block;
      width: 1.2em;
      height:1em;
    }
    &:hover{
      cursor: pointer;
    }
  }
  @media screen and (max-width:900px) {
    .desc{
      padding:1em 3em;
    }
  }
}
.contact{
  padding: 5em 0em;
  height: 45em;
 
  .bigbox{
    width:60%;
    margin: 0 auto;
    
    .title{
      text-transform: uppercase;
      font-size: 2.5em;
      text-align: center;
      font-family: OSBold;
      text-align: center;
      background: url('../images/title-background.png')no-repeat center bottom;
      padding-bottom: .8em;
      margin-bottom: 1em;
    }
    .desc{
      text-align: center;
      width:100%;
      margin:0 auto;
      font-family: OSLight;
      margin-bottom: 1em;
      }
    .register{
        width:100%;
        margin: 0 auto;
        height:20em;
        .top{
          width: 100%;
          height:4em;
          display: flex;  //弹性盒子j
          justify-content: space-between;
          .item{
            width:42%;
            .input{
              width:100%;
          }
          }

        }
        .bottom{
          width:100%;
          margin-bottom: 1em;
          h5{
            font-size: 1em;
            color:black;
          }
          textarea{
            width:100%;
            height:10em;
            font-size: 1.2em;
          }
        }
        .send{
          width:100%;
          text-align: right;
          button{
            width:15em;
            color: #fff;
            text-transform: uppercase;
            text-align: center;
            background-color: #fcac45;

            &:hover{
              border-bottom:5px solid #908f8d;
              transform:scale(1.1);
            }
          }
        }

    }
  }
    @media screen and (max-width:600px){
    height: 50em;
    padding:3em 0em 3em;

    .title{
      font-size:2em;
    }

    .desc{
      width:95%;
    }

    .register{
      .top{
        display: block;
        .item{
          width:100%;
          margin-bottom:1.5em;
        }
      }

      .send{
        text-align: center;

        button{
          width:16em;
        }
      }
    }
  }
}
.footer{  
  background:#111111;
  padding:2em 0em;
  color:#fff;

  .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;

    &::before,&::after{
      content: '';
      display: none;
    }

    p{
      font-size:1.2em;
      font-family: OSLight;
      color:#908f8d;
      span{
        font-family: OSBold;
      }
    }

    .link{
      display: flex;

      .item{
        width:3em;
        height:3em;
        border:2px solid #737373;
        border-radius: 100px;
        overflow: hidden;
        cursor: pointer;
        transition: all linear .3s;
        margin-right:.5em;

        &:hover{
          transform: translateY(-10px);
          box-shadow: 0px 10px 10px 1px #797979;
        }

        img{
          width: 100%;
        }
      }
    }
  }

  @media screen and (max-width:700px){
    .container{
      display: block;

      .copyright, .link{
        width:100%;
        margin-bottom:1em;
      }

      .copyright{
        text-align: center;
      }

      .link{
        justify-content: space-around;
      }
    }
  }
}